<template>
    <div class="user-security">
        <div class="user-security-content">
            <div class="user-security-row">
                <div class="user-security-row-header">
                    <span>更改用户名</span>
                </div>
                <div class="user-security-row-content">
                    <span>您当前使用的用户名是 
                        {{ data.email&&data.email.slice(0, data.email.indexOf('@'))}}
                    </span>
                </div>
                <div class="user-security-row-action">
                    <g-button disabled @click="openModal( 'email' )">更改</g-button>
                </div>
            </div>
            <!-- <div class="user-security-row">
                <div class="user-security-row-header">
                    <span>绑定手机</span>
                </div>
                <div class="user-security-row-content">
                    <span>您当前绑定的手机号码是 134****4990</span>
                </div>
                <div class="user-security-row-action">
                    <g-button>更改</g-button>
                </div>
            </div> -->
            <div class="user-security-row">
                <div class="user-security-row-header">
                    <span>更改密码</span>
                </div>
                <div class="user-security-row-content">
                    <span></span>
                </div>
                <div class="user-security-row-action">
                    <g-button @click="openModal( 'password' )">更改</g-button>
                </div>
            </div>
        </div>
        <transition name="g-modal-fade" @afterLeave="afterLeave">
            <div class="g-modal-wrapper private" v-show="modalVisible" @touchmove.stop>
                <div class="g-modal user-security-modal">
                    <div class="g-modal-header user-security-modal-header">
                        <span>{{ modalType === 'password' ? '修改密码' : '修改用户名' }}</span>
                        <i class="iconfont icon-close" @click="closeModal"></i>
                    </div>
                    <div class="g-modal-content user-security-modal-content">
                        <div class="user-security-row">
                            <g-input size="large" type="password" placeholder="请输入密码" v-model="form.password"></g-input>
                        </div>
                        <template v-if="modalType === 'password'">
                            <div class="user-security-row">
                                <g-input size="large" type="password" placeholder="请输入新密码" v-model="form.newPassword">
                                </g-input>
                            </div>
                            <div class="user-security-row">
                                <g-input size="large" type="password"
                                    :error="rePasswordError"
                                    placeholder="请再次输入新密码" 
                                    v-model="form.reNewPassword">        
                                </g-input>
                                <p class="user-security-row-error" v-show="rePasswordError">两次输入的密码不一致</p>
                            </div>
                        </template>
                        <div class="user-security-row" v-else>
                            <g-input size="large" placeholder="请输入新的用户名" :error="emailError" v-model="form.email" @input="emailError = false"></g-input>
                            <p class="user-security-row-error" v-show="emailError">用户名不能为空</p>
                        </div>
                    </div>
                    <div class="g-modal-footer user-security-modal-footer">
                        <g-button type="primary" @click="submit" :loading="pending">确定</g-button>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import Bus from '@/utils/event_bus'
import GButton from '@/components/common/g-button'
import GInput from '@/components/common/g-input'
import { user as userAPI } from '@/api'

export default {
    name: 'user-security',
    props: {
        data: {
            default () {
                return {}
            }
        }
    },
    data () {
        return {
            modalType: 'password',
            modalVisible: false,
            pending: false,
            form: {
                email: '',
                password: '',
                newPassword: '',
                reNewPassword: ''
            },
            emailError: false
        }
    },

    // mounted (to, from, next) {
    //    Bus.$emit('on-submenu-change', '安全管理');
    // },

    computed: {
        rePasswordError () {

            if ( this.form.reNewPassword.length === 0 ) return false;

            return this.form.newPassword !== this.form.reNewPassword;
        },
        valid () {
            if ( this.modalType === 'password' ) {
                if ( this.form.password.length === 0 || this.form.newPassword.length === 0 || this.rePasswordError ) {
                    return false;
                }
            } else {
                if ( this.form.email.length === 0 || this.form.password.length === 0 ) {
                    return false;
                }
            }
            return true;
        }
    },
    methods: {
        openModal ( type ) {
            this.modalType = type;
            this.modalVisible = true;
        },
        closeModal () {
            this.modalVisible = false;
        },
        afterLeave () {

            this.form = {
                email: '',
                password: '',
                newPassword: '',
                reNewPassword: ''
            }

        },
        checkEmail() {
            return /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]+)+$/.test( this.form.email )
        },
        submit () {

            if ( !this.valid ) {
                this.$message.error( '请输入正确信息' );
                return;
            }

            if ( this.modalType === 'email' ) {

                // if ( !this.checkEmail() ) {
                //     this.emailError = true;
                //     return;
                // }
                if(this.form.email == ''){
                    this.emailError = true;
                    return;
                }

                this.pending = true;
                userAPI.updateEmail( this.form.email + '@tjism.com', this.form.password ).then( res => {

                    if ( res.data.code === 0 ) {

                        this.$message.success( '修改用户名成功' );
                        this.closeModal();
                        this.$emit( 'on-change' );

                    } else {

                        this.$message.error( res.data.msg || '修改用户名失败' );

                    }

                    this.pending = false;

                } ).catch( err => {

                    this.$message.error( '修改用户名失败' );
                    this.pending = false;

                } )

            } else {

                userAPI.updatePassword( this.form.password, this.form.newPassword )
                    .then( res => {

                        if ( res.data.code === 0 ) {

                            this.$message.success( '修改密码成功' );
                            this.closeModal();
                            this.$emit( 'on-change' );

                        } else {

                            this.$message.error( res.data.msg || '修改密码失败' );

                        }

                        this.padding = false;

                    } ).catch( err => {

                        this.$message.error( '修改密码失败' );
                        this.pending = false;

                    } )

            }

        }
    },
    components: {
        GInput,
        GButton
    }
}
</script>

<style lang="scss">
@import 'common';
.user-security {

    .user-security-content {
        padding-top: 20px;
        // min-width: 660px;
        padding-bottom: 40px;
        margin-bottom: 40px;
        min-width: 670px;

        @media screen and (max-width: 450px) {
            min-width: 0;
        }

        .user-security-row {
            position: relative;

            &:first-child {
                &::before {
                    content: '';
                    display: inline-block;
                    position: absolute;
                    top: -1px;
                    left: 0;
                    width: 100%;
                    border-bottom: 1px solid $bdGray;
                }
            }

            height: 70px;
            width: 100%;
            line-height: 70px;

            &::after {
                content: '';
                display: inline-block;
                position: absolute;
                bottom: -1px;
                left: 0;
                width: 100%;
                border-bottom: 1px solid $bdGray;
            }

            .user-security-row-header {
                float: left;
                width: 200px;
                padding-left: 10px;
            }

            .user-security-row-content {
                float: left;
                width: 300px;
            }

            .user-security-row-action {
                float: right;
                width: 160px;
                text-align: center;

                .g-button {
                    padding: 0 30px;
                }
            }

            @media screen and (max-width: 450px) {

                .user-security-row-header {
                    width: 100px;
                }

                .user-security-row-content {
                    display: none;
                }

                .user-security-row-action {
                    width: 100px;
                    // float: left;
                }
            }
        }

    }

    .user-security-modal {
        width: 360px;
        
        @media screen and (max-width: 440px) {
            & {
                width: 90%;
            }

            .user-security-modal-content {
                padding: 20px;

                .user-security-row {
                    .g-input {
                        width: 100% !important;
                    }
                }
            }

        }

        .user-security-modal-content {
            padding: 20px;

            .user-security-row {
                text-align: center;
                margin-bottom: 10px;

                &:last-child {
                    margin-bottom: 0;
                }

                .g-input {
                    display: inline-block;
                    width: 260px;
                }

                .user-security-row-error {
                    color: $danger;
                }

            }
        }

        .user-security-modal-footer {
            text-align: center;
            padding: 20px 0 30px;

            .g-button {
                font-weight: 600;
                width: 150px;
            }
        }
    }
}
</style>
